<template>
  <div class="userinfo-wrapper">
    <div class="img-box" style="width: 50px;height: 50px;">
      <BaseIamge></BaseIamge>
    </div>
    <div class="info-box">
      <div class="drop-box">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{ userInfo.data && userInfo.data.name}} <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="首页">首页</el-dropdown-item>
            <el-dropdown-item command="退出">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import BaseIamge from '@/components/BaseImage'
import { mapGetters } from 'vuex'
export default {
  components: {
    BaseIamge
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    handleCommand(val) {
      // 1. 跳转回首页
      // 2. 退出登陆
      this.$emit('handleCommand', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.userinfo-wrapper {
  display: flex;
  width: 200px;
  .img-box {
    flex: 1;
  }
  .info-box {
    flex: 1;
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
